import React, { useState } from 'react';
import { Tabs, Card } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import List from './list'
import Group from './group'

const { TabPane } = Tabs;

const tabList = [
    {
        title: "拼团列表",
        key: "1",
        Component: <List />
    },
    {
        title: "开团团队",
        key: "2",
        Component: <Group />
    }
];

const index = () => {

    const [tabKey, setTabKey] = useState("1")

    return (
        <PageHeaderWrapper title={false}>
            <Card bordered={false}>
                <Tabs activeKey={tabKey} onChange={(activeKey) => {
                    setTabKey(activeKey)
                }}>

                    {
                        tabList.map((item: any) =>
                            <TabPane tab={item.title} key={item.key} style={{ outline: "none" }}>
                                {item.Component}
                            </TabPane>
                        )
                    }

                </Tabs>
            </Card>
        </PageHeaderWrapper>
    );
};

export default index;